<template>
  <div class="wicket" v-if="videoCheck">
    <div class="close" @click="closeFun">
      <el-icon><close-bold /></el-icon>
    </div>
    <div class="video">
      <video :src="video_url"></video>
      <div class="progressBar">
        <div class="play" @click="playFun(play)">
          <img src="@/assets/image/material/play_icon.png" alt="" v-show="play" />
          <img src="@/assets/image/material/suspend_icon.png" alt="" v-show="!play" />
        </div>
        <div class="progress">
          <progress :value="progress" max="1" />
          <div class="time">
            <span class="start">{{ startTime }}</span>
            <span class="end">{{ endTime }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { number, time } from 'echarts'
import { useFocus } from 'element-plus'
import { ref } from 'vue'
import emitter from '../common/js/mitt.js'

let videoCheck = ref(false)
let play = ref(true)
let progress = ref('0')
let startTime = ref('00:00')
let endTime = ref('00:00')
let video_url = ref('')

// 打开播放器窗口
const checkFun = () => {
  videoCheck.value = true
}
const videoFun = (url: any) => {
  // console.log(url)
  video_url.value = url
  setTimeout(() => {
    getTime()
  }, 100)
}
emitter.on('true', checkFun)
emitter.on('url', videoFun)

// 关闭播放器窗口
const closeFun = () => {
  videoCheck.value = false
  progress.value = '0'
  startTime.value = '00:00'
  endTime.value = '00:00'
  play.value = true
}

// 获取起始时间
const getTime = () => {
  let video = document.querySelector('video')
  let minute = Math.floor(video.duration / 60)
  let second = Math.floor(video.duration % 60)

  endTime.value = `${mendZero(minute) || '00'}:${mendZero(second) || '00'}`
}

// 获取当前时间
const nowTime = () => {
  let video = document.querySelector('video')
  let minute = Math.floor(video.currentTime / 60)
  let second = Math.floor(video.currentTime % 60)

  let now_time = video.currentTime
  let end_time = video.duration
  let speed = now_time / end_time

  if (speed == 1) {
    play.value = true
  }

  progress.value = speed
  startTime.value = `${mendZero(minute)}:${mendZero(second)}`
}

// 播放和暂停
const playFun = (state: boolean) => {
  let video = document.querySelector('video')
  play.value = !state
  getTime()

  const Time = setInterval(() => {
    if (videoCheck.value) {
      nowTime()
    }
  }, 1000)

  if (state) {
    video.play()
    Time
    // console.log('开始')
  } else {
    video.pause()
    clearInterval(Time)
    // console.log('暂停')
  }
}

const mendZero = (num: any) => {
  if (num < 10) {
    num = '0' + num
  }
  return num
}
</script>

<style lang="scss" scoped>
.wicket {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba($color: #000, $alpha: 0.6);
  align-items: center;
  justify-content: center;
  .close {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50px;
    right: 50px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 30px;
  }
  .video {
    width: 60%;
    height: 70%;
    display: flex;
    flex-direction: column;
    min-width: 1000px;
    min-height: 700px;
    background: white;
    video {
      width: 100%;
      height: 650px;
      background: black;
    }
    .progressBar {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      .play {
        width: 75px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .progress {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px 0 0;
        box-sizing: border-box;
        flex-direction: column;
        position: relative;
        progress {
          width: 100%;
        }
        .time {
          width: 98%;
          position: absolute;
          bottom: 0px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>